<!--
 * @Author: your name
 * @Date: 2021-04-27 10:24:59
 * @LastEditTime: 2021-10-08 16:29:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vueDemo\src\page\index.vue
-->
<template>
  <div class="detailContent">
    <div class="breadcrumbBox">
      <p class="breadcrumbTitle">我的位置</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/show/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/show/list' }">产品中心</el-breadcrumb-item>
        <el-breadcrumb-item :to="parentObj">{{parentObj.title}}</el-breadcrumb-item>
        <el-breadcrumb-item>商品详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="pageIcon detailIcon"><img src="../../assets/img/pro_img.gif" alt=""></div>
    <div class="detailImg"><img :src="imgBaseUrl + detailObj.imageUrl" alt=""></div>
    <div class="pageIcon detailIcon"><img src="../../assets/img/pro_view.gif" alt=""></div>
    <p class="detailName">产品名称：{{ detailObj.imageName }}</p>
    <p class="detailModel">产品分类：{{ categoryName }} </p>
    <p class="detailDesc">产品简介：{{ detailObj.desc || '暂无' }} </p>
    <div class="detailMain">
      <div class="detailIcon"><img :src="detailIcon" alt=""></div>
      <template v-if="detailList.length > 0">
        <div class="detailList" v-for="(item, index) in detailList" :key="index">
          <img :src="imgBaseUrl + item.imageUrl" alt="">
        </div>
      </template>
      <template v-else>
        <p class="noData">无资料</p>
      </template>
    </div>
  </div>
</template>

<script>
import { detailIcon } from '@/assets/js/img.js'
import { getProductDetail } from '@/api/api.js'
import { mapGetters } from 'vuex'

export default {
  name: 'Detail',
  components: {},
  data () {
    return {
      detailIcon,
      detailObj: {},
      detailList: [],
      parentObj: {},
      imgBaseUrl: process.env.VUE_APP_IMAGE_URL
    }
  },
  mounted () {
    this.detailObj = this.$route.query
    const { id, parentId } = this.$route.query
    this.getParentList(parentId)
    this.getDetail(id)
  },
  computed: {
    ...mapGetters([
      'typeObj', 'typeTree'
    ]),
    categoryName () {
      const type = this.typeObj[this.detailObj.parentId]
      return type ? type.categoryName : ''
    }
  },
  methods: {
    getParentList (parentId) {
      const parent = this.typeObj[parentId]
      // console.log(parent)
      if (parent) {
        if (parent.parentId) {
          this.getParentList(parent.parentId)
        } else {
          this.typeTree.forEach((item, index) => {
            if (Number(item.id) === Number(parent.id)) {
              // console.log(item)
              this.parentObj = {
                title: item.categoryName,
                path: `/show/list?index=${index}&update=1`
              }
            }
          })
        }
      }
    },
    getDetail (id) {
      getProductDetail({
        imageId: id,
        pageSize: 100
      }).then(res => {
        this.detailList = res.pageData
      })
    }
  },
  beforeRouteUpdate (to, from, next) {
    const { id, parentId } = to.query
    if (id) {
      this.detailObj = to.query
      this.getParentList(parentId)
      this.getDetail(id)
    }
    next()
  }
}
</script>

<style scoped lang="less">
.detailContent {
  .breadcrumbBox {
    display: flex;
    line-height: 30px;
    .breadcrumbTitle {
      margin-right: 30px;
      font-size: 14px;
    }
    .el-breadcrumb {
      padding-top: 7px;
    }
  }
  .detailIcon {
    width: 200px;
    height: 40px;
  }
  .detailMain .detailIcon {
    width: 200px;
    height: auto;
  }
  .detailImg {
    width: 100%;
    height: auto;
    text-align: center;
    img {
      max-height: 300px;
    }
  }
  >p {
    margin: 10px 40px;
    font-size: 16px;
    line-height: 30px;
  }
  .detailList {
    font-size: 0;
    img {
      width: 100% !important;
    }
  }
}
</style>
